<template>
<div style="background-color: #aaaaa; border-radius:15px" >
    <div class="topic">
        <div class="topic-left">
            <div class="button-back" @click="Close" >关闭</div>
            <div class="shop-id"> {{ shop.id }}  </div>
            <div class="shop-name">{{ shop.name }}</div>
            <div class="shop-area"> 第{{ armAreaIdx }}号防区</div>
            <!--div style="cursor:pointer;position:relative" @click="showShopDetail = shop">
                电话联系
                <svg id="图层_1" data-name="图层 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 276 315" class="phone" >
                    <path class="phone-fill" d="M321,328.48a109.05,109.05,0,0,1-14.39,12.11c-27.16,19.09-62.52,21.58-92.81,8a280.67,280.67,0,0,1-59.23-36,286.5,286.5,0,0,1-48-48.17A281.77,281.77,0,0,1,70.06,203c-14-32.27-9.69-69.86,12.52-97.14a109.56,109.56,0,0,1,24.31-22.07,20.9,20.9,0,0,1,28.39,5.38l25.81,35.75a32.64,32.64,0,0,1-3.63,42.43l-14.26,14-.14.14c-1.76,1.91-20.32,24.08,25.59,70s68.09,27.35,70,25.59l.14-.14,14-14.25A32.64,32.64,0,0,1,295.17,259l34,24.59A20.88,20.88,0,0,1,334.58,312,108.9,108.9,0,0,1,321,328.48Z" transform="translate(-62 -42.84)"/><path class="cls-1" d="M218,172.88a2.14,2.14,0,0,1-.6-1.84,40,40,0,0,0-28.65-44.55,2.14,2.14,0,1,1,1.16-4.12,44.29,44.29,0,0,1,31.72,49.32,2.14,2.14,0,0,1-3.63,1.19Z" transform="translate(-62 -42.84)"/><path class="cls-1" d="M255.69,179.54a3.21,3.21,0,0,1-.91-2.76A77.86,77.86,0,0,0,199,90.08a3.21,3.21,0,1,1,1.74-6.18,84.29,84.29,0,0,1,60.37,93.86,3.21,3.21,0,0,1-5.45,1.79Z" transform="translate(-62 -42.84)"/><path class="cls-1" d="M295.87,186.58a4.28,4.28,0,0,1-1.21-3.68A118.22,118.22,0,0,0,210,51.25,4.28,4.28,0,0,1,212.32,43,126.79,126.79,0,0,1,303.13,184.2a4.28,4.28,0,0,1-7.26,2.39Z" transform="translate(-62 -42.84)"/>
                </svg>
            </div-->

        </div>
        <div class="topic-right">
            <span class="" >防区状态：</span> <span>{{ ShowArmAreaStatus() }}</span> 
        </div>
    </div>
    <div class="body" >
        <div class="left-video" >
            <div id="rtspvideo">ok</div>
        </div>
        <div class="right-info" >
            <form v-if="!hasProcessed" @submit.prevent="processAlarm">
                <label>
                    <input name="result" type="radio" value="误报" v-model="result" /> 
                    误报
                </label>
                <br/>
                <label>
                    <input name="result" type="radio" value="电话打不通" v-model="result" /> 
                    打不通
                </label>
                <br/>
                <label>
                    <input name="result" type="radio" value="已经处理了" v-model="result" />
                    已经处理
                </label>
                <br/>
                <label>
                    <input name="result" type="radio" value="others" v-model="result" /> 
                    其他
                </label>
                <br/>
                <label>
                    <textarea name="reason" rows="4" cols="30" v-model="reason"  />
                    备注原因
                </label>
                <br/>
                <label>
                    <input name="提交" type="submit" value="提交"/>
                </label>
            </form>
            <div>
                视屏通道
                <ul style="padding: 0px;" >
                    <li class="channel-button" v-for="channel in channels" @click="playChannel( channel )">
                            {{ channel }}
                    </li>
                </ul>
                <button @click="testNVR">
                    测试 nvr 按钮
                </button>
            </div>
            <div >
                <p>防损科电话: {{shop.contract }}</p>
                <p>防损科长: {{ shop.charger }} </p>
                <p>手机号: {{ shop.contract }} </p>
                <p>区负责人: {{ areas[shop.areaid].charger }} </p>
                <p>手机号: {{ areas[shop.areaid].mobile_phone }}  </p>
            </div>
        </div>
    </div>
    <div class="clear-both">
    </div>
</div>
</template>

<style scoped>
#showShopDetail{ 
    background-color:#aabbff;
    position: absolute;
    top: 120px;
    right: 40px;
    width: 300px;
    height: 300px;
    z-index: 1000;
    text-align: left;
    padding-left: 20px;
    padding-top: 20px;
}

.phone{
    width: 24px;
}

.phone-fill{
    fill:#a0faab;
}

.clear-both{
    clear:both;
}

.button-back{
    width: 4em;
    height: 2em;
    font-size: 2em;
    border-radius: 10px;
    background-color: #a0faab;
    text-align: center;
    padding-top: 10px;
}

.topic{
    margin:0px;
    width: 100%;
    height:60px;
    padding-top:10px;
    padding-bottom: 10px;
    background-color: white;
    border-radius: 5px;

}
.topic:after{
    content: "";
    display:block;
    clear:both;
}
.topic-left{
    float: left;
    line-height: 100%;
}

.topic-left > div{
    display:inline-block;
    margin: 0 20px;
    line-height: 100%;
    font-size: 1.5em;
}

.topic-right{
    margin-right: 20px;
    float: right;
    font-size: 1.5em;
}

.topic-right > div{ 
    display: inline-block;
}

.body{ 
    width: 100%;
    height: 480px;
}
.left-video{
    float: left;
    margin:0px;
    width: 800px;
    max-width: 800px;
    margin-right: 0px;
    background-color: #ddd;
}
.right-info{ 
    margin: 0;
    float: right;
    height:480px;
    width: 360px;
    text-align: left;
    padding-left: 40px;
    background-color: #aaddff
}

.channel-button{
    border-radius:10px;
    font-size: 1em;
    height: 1.5em;
    max-width: 10em;
    margin: 1em;
    cursor:pointer;
    background-color: #aaa;
}
form{
    padding: 10px;
    text-align:left;
}
</style>

<script>
import axios from 'axios'
import bus from './bus'
import { initHikvision, clickLogin, clickGetChannels, clickStartRealPlay, clickStartPlayback } from '@/common/hikvision'

export default{ 
    name: "armarea",
    props: [ 'protector', 'shop', 'arm-area-idx', 'channels', 'stamp' ],
    data(){
        return {
            ip: null,
            channelID: null,
            reason: null,
            result:null,
            hasProcessed: null
        }
    },
    computed:{
        areas(){
            return this.$store.state.areas;
        }
    },
    methods: {
        processAlarm(){
            console.log( "processAlarm .... ")
            if( this.result == "others" ){
                this.result = this.reason;
            }
            else {
                this.$store.dispatch( "processAlarm", { stamp: this.stamp, process_result: this.result } )
                this.hasProcessed = true;
            }
        },

        playVideo( ) {
            var stamp = this.stamp,
                shop = this.shop,
                protector = this.protector,
                channels = this.channels,
                arm_area_idx = this.armAreaIdx;
            

            console.log( "stamp: ", stamp );
            console.log( "arm_area_idx: ", arm_area_idx );
            console.log( "shop: ", shop);
            console.log( "protector: ", protector );
            console.log( "channels: ", channels)
            //work around 
            if( ! channels.length){
                channels = Object.keys( shop.cameras )[0];
            }
            stamp = this.stamp ? 0: this.stamp;

            var channel = channels[0];
            console.log( "channel: ", channel );

            var channel_parts = channel.split( "#");
            console.log( channel_parts );

            this.ip = channel_parts[0];
            this.channelID = parseInt( channel_parts[1] );

            var nvr = this.shop.nvrs[this.ip];

            var ip = this.ip;
            var channelID = this.channelID;

            console.log( "-------- play video -----------");
            console.log( "ip:       ", ip );
            console.log( "port:     ", nvr.port);
            console.log( "username: ", nvr.username);
            console.log( "password: ", nvr.password);


            clickLogin( ip, nvr.port, nvr.username, nvr.password ).then( ( data ) => { 
                if( stamp ){
                    var start_stamp = stamp;
                    console.log( 'click start play back ----!!! ', start_stamp );
                    var sStamp = new Date( Number( start_stamp ) ).toISOString();
                    console.log( "sStamp : ", sStamp)
                    var sDate = sStamp.split( "T" )[0];
                    var sTime = sStamp.split( "T" )[1].split( ".")[0];
                    var start_str = sDate + " " + sTime;
                    console.log( "start_str: ", start_str );
                    
        
                    sStamp = new Date(  Number( start_stamp ) + (3600 * 1000) ).toISOString();
                    sDate = sStamp.split( "T")[0];
                    sTime = sStamp.split( "T" )[1].split( "." )[0];
                    var end_str = sDate + " " + sTime;
                    clickStartPlayback( ip, channelID, start_str, end_str );
                }
                else {
                    console.log( "start real play ......")
                    clickStartRealPlay( ip, channelID );
                }
            });
        },

        playChannel( channel ){
            var channel_parts = channel.split( "#");
            this.ip = channel_parts[0];
            this.channelID = parseInt( channel_parts[1] );
            var nvr = this.shop.nvrs[this.ip];

            clickLogin( this.ip, nvr.port, nvr.username, nvr.password ).then( ( data ) => { 
                console.log( "click start real play ");
                if( this.stamp ){

                    var start_stamp = this.stamp;
                    var sStamp = new Date( Number( start_stamp ) ).toISOString();
                    var sDate = sStamp.split( "T" )[0];
                    var sTime = sStamp.split( "T" )[1].split( ".")[0];
                    var start_str = sDate + " " + sTime;
                    
        
                    sStamp = new Date(  Number( start_stamp ) + (3600 * 1000) ).toISOString();
                    sDate = sStamp.split( "T")[0];
                    sTime = sStamp.split( "T" )[1].split( "." )[0];
                    var end_str = sDate + " " + sTime;

                    clickStartPlayback( ip, channelID, start_str, end_str )
                }
                else {
                    clickStartRealPlay( this.ip, this.channelID );
                }
            });
        },

        Close(){
            window.parent.window.videoBus.$emit( "CloseArmArea", null );
        },

        testNVR(){
            clickLogin( '192.168.1.150', 80, 'admin', 'admin1234' ).then( ()=> {
                clickStartRealPlay( '192.168.1.150',  4 );
            });
        },

        ShowArmAreaStatus( s ) { 
            console.log( this.protector );
            var s ;
            if( this.armAreaIdx && this.protector.arm_areas[this.armAreaIdx]){
                s = this.protector.arm_areas[this.armAreaIdx].s;
            }
            if( s == "c")
                return "撤防";
            else if( s == "b")
                return "布防";
            else if( s == 'a'){
                return "报警";
            }
            else 
                return "未知"
        },
    },

    created(){
        console.log( "show arm area stamp: ",this.stamp );
        for( let i = 0; i < this.$store.state.alarmLogs.length; i++ ){
            if( this.stamp == this.$store.state.alarmLogs[i].stamp ) {
                if( this.$store.state.alarmLogs[i].process_result ){
                    result = this.$store.state.alarmLogs[i].process_result;
                }
                break;
            }
        }
        if( !this.stamp ){
            this.hasProcessed = true;
        }
    },

    mounted(){
        this.$nextTick( ()=> { 
            console.log( "------------------  arm area video mounted" ) ;
            console.log( document.getElementById( "rtspvideo"))
            initHikvision( 'rtspvideo', 800 , 480 )
            this.playVideo();
        })
    },
}
</script>